<script setup lang="ts">
import AuthBar from '@/components/authBar/index.vue';
import { buildAssetSource } from '@/utils';

function handleBackHome() {
  uni.reLaunch({
    url: '/pages/index/index'
  });
}
</script>

<template>
  <div class="result flex-col">
    <AuthBar back-home />
    <view class="flex-center flex-col flex-1 overflow-auto">
      <view class="page-cover mx-auto flex-center">
        <image :src="buildAssetSource('dui.png')" class="h-134 w-134" />
      </view>
      <view class="page-title mt-50">
        感谢您的反馈
      </view>
      <view class="page-subtitle mt-30">
        您的意见对我们非常重要，我们将认真听取
        并持续改进服务质量。感谢您的参与！
      </view>
      <view class="result-content mt-120">
        <view class="result-content__title">
          您的反馈编号
        </view>
        <view class="result-content__number">
          FPW27213
        </view>
      </view>
      <view class="flex-center">
        <view class="back-btn">
          <wd-button block @click="handleBackHome">
            返回首页
          </wd-button>
        </view>
      </view>
    </view>
  </div>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '满意度调查',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.result {
  height: 100%;
  background: var(--bg-color);

  .page-cover {
    background: #e5efff;
    width: 202px;
    height: 202px;
    border-radius: 50%;
  }

  .page-title {
    font-size: 60px;
    font-weight: bold;
    color: var(--text-color);
    text-align: center;
  }

  .page-subtitle {
    text-align: center;
    font-size: 28px;
    color: var(--secondary-text-color);
    max-width: 524px;
    margin: 0 auto;
  }

  .result-content {
    width: 762px;
    height: 257px;
    background: rgba(247, 250, 254, 0.5);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.5);

    .result-content__title {
      color: var(--secondary-text-color);
      font-size: 32px;
      margin-top: 40px;
      text-align: center;
    }

    .result-content__number {
      color: var(--primary);
      font-weight: bold;
      margin-top: 20px;
      text-align: center;
      font-size: 60px;
    }
  }

  .back-btn {
    width: 708px;
    --wot-button-medium-height: 124px;
    --wot-button-medium-fs: 42px;
    margin-top: 80px;

    :deep(.wd-button) {
      font-weight: bold;
    }
  }
}
</style>
